<template>
	<div class="rankYh w944">
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>学员榜</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report"> 
				<div class="msearch">
					<input placeholder="请输入学员名称、学分、排名……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
            </div>
            <div class="tableFlex">
				<el-table ref="multipleTable1" :data="tableData1" border>
					<el-table-column prop="no" label="排名"></el-table-column>
					<el-table-column prop="nickname" label="用户名"></el-table-column>
					<el-table-column prop="credit" label="学分"></el-table-column>
				</el-table>
				<el-table ref="multipleTable2" :data="tableData2" border>
					<el-table-column prop="no" label="排名"></el-table-column>
					<el-table-column prop="nickname" label="用户名"></el-table-column>
					<el-table-column prop="credit" label="学分"></el-table-column>
				</el-table>
			</div>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				search:'',
				tableData:[],
				tableData1:[],
				tableData2:[],
		        pagesize: 30,
		        currentpage: 1,
		        total: 1
			}
		},
		methods: {
			getTableList() {
				this.tableData1 = [];
				this.tableData2 = [];
				this.$ajax({
					url: this.$root.jifuUrl + "/creditRankingList?"+'page='+this.currentpage+'&num='+this.pagesize+ '&name='+this.search+'&rootcompanyid=1',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;	
							this.total=res.data.data.pageParam.items;
							this.spliceTable();
						}
					}
				});
			},
			spliceTable(){
				for (var i = 0; i < this.tableData.length; i++) { 
					if(i<15){
						this.tableData1.push(this.tableData[i]);
					}else{
						this.tableData2.push(this.tableData[i]);
					}
				}
				this.tableData=[];		
			},
		    handleCurrentChange (value) {
		        this.currentpage = value;
		        this.getTableList();
		    },
		    reBack(){
				this.$router.go(-1);
			}
		},
		mounted: function() {
			this.getTableList();
		}
	}
</script>

<style>
	.rankYh .tableFlex{display:flex;justify-content:space-between;}
	.rankYh .tableFlex .el-table__body-wrapper{flex: 2;}
</style>